import moment from "moment"
import { defaultBackgroundAttr, fliterComponentTypes, defaultFarmat } from "../lib/const"
import { deepCopy, ergodicList } from "../lib/utils"

window.moment = moment
// 公共样式
export const commonStyle = {
  opacity: 1,
  widthUnit: "px",
  heightUnit: "px",
  leftUnit: "px",
  topUnit: "px",
  width: 100,
  height: 100
}

export const commonAttr = {
  animations: [],
  events: {}, // ()=> {},
  jump: {
    targetType: "board",
    openType: "target",
    isFilter: false,
    source: undefined,
    target: []
  },
  linkage: {
    source: undefined, // 源字段(关联字段)
    componentList: [], // 目标组件字段列表
  },
  class: "c-component",
  isShow: true, // 是否显示
  isDrop: false, // 当前准备接受被放入组件的组件
  isGeometry: true, // 是否拥有几何属性配置
  isData: true, // 是否拥有数据配置
  isStyle: true, // 是否拥有样式配置
  isEvent: false, // 是否拥有事件配置
  isLinkage: false, // 是否拥有联动配置
  isJump: false, // 是否拥有跳转配置
}

// 编辑器左侧组件列表
// 组件需要在custom-components注册,并在render函数里添加新增的组件
const list = ()=> [
    {
      id: "text",
      tag: "c-text",
      label: "文字",
      props: {
        value: "这是一段文字",
      },
      icon: "italic",
      type: "other",
      style: {
        width: 100,
        height: 22,
        fontSize: 14,
        fontWeight: 500,
        lineHeight: 22,
        // lineHeightUnit: "px",
        textAlign: "left",
        color: "#333333",
      },
    },
    {
      id: "web",
      tag: "c-web",
      label: "Web",
      props: {
        value: "https://",
      },
      icon: "global",
      type: "other",
      style: {
        width: 500,
        height: 400,
      },
    },
    {
      id: "box",
      tag: "c-box",
      label: "方块",
      props: {
        value: "",
      },
      icon: "border",
      type: "other",
      style: {
        width: 100,
        height: 100,
        borderColor: "#333333",
        borderWidth: 1,
        borderStyle: "solid",
        borderWidthUnit: "px",
        borderRadius: 0,
        borderRadiusUnit: "px",
        ...defaultBackgroundAttr
      },
      isData: false
    },
    {
      id: "tabs",
      tag: "c-tabs",
      label: "选项卡",
      props: {
        value: "新标签0",
        list: [
          {
            label: "新标签0",
            value: "新标签0",
            children: []
          }
        ]
      },
      icon: "copy",
      type: "other",
      style: {
        width: 300,
        height: 200,
      },
    },
    {
      id: "date-picker",
      tag: "c-date-picker",
      label: "日期选择",
      props: {
        value: undefined,
        ...defaultFarmat,
        title: "日期选择",
        minDate: undefined,
        maxDate: undefined,
        filterField: undefined
      },
      type: fliterComponentTypes.date,
      icon: "dashboard",
      style: {
        width: 240,
        height: 34,
        backgroundColor: "#ffffff",
      },

    },
    {
      id: "range-picker",
      tag: "c-range-picker",
      label: "日期范围",
      props: {
        value: [],
        ...defaultFarmat,
        title: "日期范围",
        filterField: undefined
      },
      type: fliterComponentTypes.dateArray,
      icon: "dashboard",
      style: {
        width: 400,
        height: 34,
        backgroundColor: "#ffffff",
      },

    },
    {
      id: "button",
      tag: "c-button",
      label: "查询按钮",
      text: "查询",
      props: {
        title: "查询",
      },
      type: fliterComponentTypes.button,
      icon: "search",
      style: {
        width: 100,
        height: 34,
        type: "primary"
      },
      // events: ()=> {
      //   return {
      //     click: (vm,opt,event)=> {
      //       opt.handleSubmit(vm,opt, event)
      //     }
      //   }
      // }
      events: {
        click: "handleSubmit"
      }
    },
    {
      id: "button",
      tag: "c-button",
      label: "重置按钮",
      text: "重置",
      props: {
        title: "重置",
      },
      type: fliterComponentTypes.button,
      icon: "sync",
      style: {
        width: 100,
        height: 34,
        type: "default",
      },
      events: {
        click: "handleReset"
      }
      // events: ()=> {
      //   return {
      //     click: (vm,opt,event)=> {
      //       opt.handleReset(vm,opt, event)
      //     }
      //   }
      // }
    },
    {
      id: "select",
      tag: "c-select",
      label: "下拉列表",
      props: {
        filterField: [],
        value: "",
        title: "下拉选择",
        options: [],
        mode: "default"
      },
      isSetAttr: true,
      dataTabel: "select",
      type: fliterComponentTypes.select,
      icon: "unordered-list",
      style: {
        width: 200,
        height: 34,
        backgroundColor: "#fff",
      },
    },
    // {
    //   id: "c-slider",
    //   tag: "c-slider",
    //   label: "范围滑块",
    //   props: {
    //     value: null,
    //     title: "范围滑块",
    //     filterField: undefined
    //   },
    //   type: "filter",
    //   icon: "slider",
    //   style: {
    //     width: 200,
    //     height: 34,
    //     backgroundColor: "#ffffff",
    //   },

    // },
    {
      id: "echarts",
      tag: "c-echarts",
      label: "echarts",
      type: "myAnalysis",
      props: {
        value:{
          title: {
            text: "示例"
          },
          animation: false,
          tooltip: {},
          legend: {
            data:["销量"]
          },
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }]
        },
      },
      icon: "area-chart",
      style: {
        width: 420,
        height: 300,
        borderWidth: 1,
        borderColor: "#bbb",
        borderRadius: "",
        fontSize: 14,
        fontWeight: 500,
        lineHeight: "",
        letterSpacing: 0,
        color: "",
        backgroundColor: "",
      },
    },
    {
      id: "table",
      tag: "c-table",
      label: "表格",
      type: "commonAnalysis",
      props: {
        columns: [
          {
            title: "Name",
            dataIndex: "name",
            key: "name",
            scopedSlots: { customRender: "name" },
          },
          {
            title: "Age",
            dataIndex: "age",
            key: "age",
            width: 80,
          },
          {
            title: "Address",
            dataIndex: "address",
            key: "address 1",
            ellipsis: true,
          },
          {
            title: "Long Column Long Column Long Column",
            dataIndex: "address",
            key: "address 2",
            ellipsis: true,
          },
          {
            title: "Long Column Long Column",
            dataIndex: "address",
            key: "address 3",
            ellipsis: true,
          },
          {
            title: "Long Column",
            dataIndex: "address",
            key: "address 4",
            ellipsis: true,
          },
        ],
        value: [
          {
            key: "1",
            name: "John Brown",
            age: 32,
            address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
            tags: ["nice", "developer"],
          },
          {
            key: "2",
            name: "Jim Green",
            age: 42,
            address: "London No. 2 Lake Park, London No. 2 Lake Park",
            tags: ["loser"],
          },
          {
            key: "3",
            name: "Joe Black",
            age: 32,
            address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
            tags: ["cool", "teacher"],
          },
        ],
      },
      icon: "table",
      style: {
        width: 600,
        height: 300,
        // size: "small",
        backgroundColor: "#fff",
      },
    },
    {
      id: "custom",
      tag: "c-custom",
      label: "自定义",
      props: {
        value: "<div style='border: 1px solid'>自定义<div>",
      },
      icon: "border",
      type: "other",
      isGeometry: false, // 是否拥有几何属性配置
      isData: true, // 是否拥有数据配置
      isStyle: false, // 是否拥有样式配置
      isEvent: false, // 是否拥有事件配置
      isLinkage: false, // 是否拥有联动配置
      isJump: false, // 是否拥有跳转配置
      style: {
        width: 100,
        height: 100
      },
    },
  ]


export default function getList(types){
  return list().filter(item => types.includes(item.type)).map(item => ({
    ...commonAttr,
    ...item,
    style: {
      ...commonStyle,
      ...item.style
    },
  }))

}
